<template>
	<div>
		<div class="control d_h_row_spbt">
			<div class="title d_h_col">{{$t("home.viewBy")}}</div>
			<el-select v-model="searchbar_type" :placeholder="$t('home.pleaseSelectMode')">
				<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
					<span style="float: left">{{ item.label }}</span>
					<!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> -->
				</el-option>
			</el-select>
			<el-select v-if="searchbar_type==1" v-model="searchbar.year" :placeholder="$t('home.pleaseSelectYear')">
				<el-option v-for="item in year" :key="item.value" :value="item.value">
					<span style="float: left">{{ item.label }}</span>
					<!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> -->
				</el-option>
			</el-select>
			<el-select  v-if="searchbar_type==1"  v-model="searchbar.month" :placeholder="$t('home.pleaseSelectMonth')">
				<el-option v-for="item in month" :key="item.value" :value="item.value">
					<span style="float: left">{{ item.label }}</span>
					<!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> -->
				</el-option>
			</el-select>
			<el-select  v-if="searchbar_type==2"  v-model="searchbar.book" :placeholder="$t('home.pleaseSelectDay')">
				<el-option v-for="item in book" :key="item.value" :value="item.value">
					<span style="float: left">{{ item.label }}</span>
					<!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> -->
				</el-option>
			</el-select>
			<el-button type="primary" @click='search'>
				{{$t("home.view")}}
			</el-button>
		</div>
		<span>{{searchbar.year?searchbar.year+ $t('home.year'):''}}{{searchbar.month?searchbar.month+ $t('home.month'):''}}{{searchbar.day?searchbar.day+ $t('home.day'):''}}{{$t("home.incomeDistribution")}}</span>
		<div id="myChart" :style="{width: '6x00px', height: '300px'}">

		</div>
		<div class="table">
			<el-table
			    :data="tableData"
			    style="width: 100%">
			    <el-table-column v-if="searchbar_type"
			      :prop="date"
			      :label="$t('home.books')"
			      width="150">
			    </el-table-column>
				<el-table-column v-else="searchbar_type"
				  :prop="date"
				  :label="$t('home.time')"
				  width="150">
				</el-table-column>
			    <el-table-column :label="$t('home.shippingInformation')">
			      <el-table-column
			        prop="name"
			        :label="$t('home.name')"
			        width="120">
			      </el-table-column>
				  <el-table-column
				    prop="name"
				    :label="$t('home.name')"
				    width="120">
				  </el-table-column>
				  </el-table-column>
			      <el-table-column :label="$t('home.site')">
			        <el-table-column
			          prop="province"
			          :label="$t('home.province')"
			          width="120">
			        </el-table-column>
			        <el-table-column
			          prop="city"
			          :label="$t('home.city')"
			          width="120">
			        </el-table-column>
					</el-table-column>
			        <el-table-column
			          prop="address"
			          :label="$t('home.site')">
			        </el-table-column>
			        <el-table-column
			          prop="zip"
			          :label="$t('home.postcode')">
			        </el-table-column>
			  </el-table>
			   <el-pagination
			        @size-change="handleSizeChange"
			        @current-change="handleCurrentChange"
			        :current-page="currentPage"
			        :page-sizes="[100, 200, 300, 400]"
			        :page-size="100"
			        layout="total, sizes, prev, pager, next, jumper"
			        :total="400">
			      </el-pagination>
		</div>
	</div>

</template>

<script>
	// 引入基本模板
	let echarts = require('echarts/lib/echarts')
	// 引入柱状图组件
	require('echarts/lib/chart/bar')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')
	export default {
		name: 'hello',
		data() {
			return {
				option: {
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						right: 10,
						data: [this.$t('home.end'), this.$t('home.other'), this.$t('home.allTheWork'), this.$t('home.orangeCatApp')]
					},
					series: [{
						name: this.$t('home.accessToTheSource'),
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '30',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 335,
								name: this.$t('home.end')
							},
							{
								value: 310,
								name: this.$t('home.other')
							},
							{
								value: 234,
								name: this.$t('home.allTheWork')
							},
							{
								value: 135,
								name: this.$t('home.orangeCatApp')
							},
						]
					}]
				},
				year: [{
					value: '选项1',
				}, {
					value: '选项2',
				}, {
					value: '选项3',
				}, {
					value: '选项4',
				}, {
					value: '选项5',
				}],
				month: [{
					value: '选项1',
				}, {
					value: '选项2',
				}, {
					value: '选项3',
				}, {
					value: '选项4',
				}, {
					value: '选项5',
				}],
				type:[{
					value: '0',
					label: '时间'
				},{
					value: '1',
					label: '书籍'
				}],
				book:[{
					value: '1',
					label: '龙须面'
				},{
					value: '2',
					label: '龙须面'
				}],
				tableData: [{
				          date: '2016-05-03',
				          name: '王小虎',
				          province: '上海',
				          city: '普陀区',
				          address: '上海市普陀区金沙江路 1518 弄',
				          zip: 200333
				        }, {
				          date: '2016-05-02',
				          name: '王小虎',
				          province: '上海',
				          city: '普陀区',
				          address: '上海市普陀区金沙江路 1518 弄',
				          zip: 200333
				        }, {
				          date: '2016-05-04',
				          name: '王小虎',
				          province: '上海',
				          city: '普陀区',
				          address: '上海市普陀区金沙江路 1518 弄',
				          zip: 200333
				        }, {
				          date: '2016-05-01',
				          name: '王小虎',
				          province: '上海',
				          city: '普陀区',
				          address: '上海市普陀区金沙江路 1518 弄',
				          zip: 200333
				        }, {
				          date: '2016-05-08',
				          name: '王小虎',
				          province: '上海',
				          city: '普陀区',
				          address: '上海市普陀区金沙江路 1518 弄',
				          zip: 200333
				        }, {
				          date: '2016-05-06',
				          name: '王小虎',
				          province: '上海',
				          city: '普陀区',
				          address: '上海市普陀区金沙江路 1518 弄',
				          zip: 200333
				        }, {
				          date: '2016-05-07',
				          name: '王小虎',
				          province: '上海',
				          city: '普陀区',
				          address: '上海市普陀区金沙江路 1518 弄',
				          zip: 200333
				        }],
				searchbar_type:'',
				searchbar:{
					year:'',
					month:'',
					book:''
				},
				currentPage:''
			}
		},
		mounted() {
			this.drawLine();
		},
		methods: {
			search(){
				var key = {}
				if(this.searchbar_type==1){
				}else if(this.searchbar_type==2){
				}
			},
			drawLine() {
				// 基于准备好的dom，初始化echarts实例

				let myChart = echarts.init(document.getElementById('myChart'))

				// 绘制图表
				myChart.setOption(this.option);
			},
			 handleSizeChange(val) {
			      },
			      handleCurrentChange(val) {
			      }
		}
	}
</script>

<style scoped="scoped" lang="scss">

</style>
